"use client"

import { ColumnDef } from "@tanstack/react-table"
import { User } from "@/types/admin"
import { Button } from "@/components/ui/button"
import { ArrowUpDown, MoreHorizontal, Pencil, Trash2 } from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import StatusBadge from "@/components/status-badge"

interface ColumnActionsProps {
  onEdit: (user: User) => void
  onDelete: (user: User) => void
}

export const columns = ({ onEdit, onDelete }: ColumnActionsProps): ColumnDef<User>[] => [
  {
    accessorKey: "employeeId",
    header: "工号",
    cell: ({ row }) => (
      <div className="font-medium">{row.getValue("employeeId")}</div>
    ),
  },
  {
    accessorKey: "name",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          className="hover:bg-transparent"
        >
          姓名
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
  },
  {
    accessorKey: "department",
    header: "部门",
    cell: ({ row }) => {
      const department = row.getValue("department") as User['department']
      return <span>{department.name}</span>
    }
  },
  {
    accessorKey: "role",
    header: "角色",
    cell: ({ row }) => {
      const role = row.getValue("role") as User['role']
      const variant = role.name === "管理员" ? "primary" : "info";
      return <StatusBadge status={variant as any}>{role.name}</StatusBadge>
    },
  },
  {
    accessorKey: "status",
    header: "状态",
    cell: ({ row }) => {
      const status = row.getValue("status") as User['status']
      return (
        <StatusBadge status={status === 'active' ? 'normal' : 'error'}>
          {status === 'active' ? '正常' : '禁用'}
        </StatusBadge>
      )
    },
  },
  {
    accessorKey: "lastLogin",
    header: "最后登录时间",
    cell: ({ row }) => {
      const date = new Date(row.getValue("lastLogin"))
      return new Intl.DateTimeFormat("zh-CN", {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
      }).format(date)
    },
  },
  {
    id: "actions",
    cell: ({ row }) => {
      const user = row.original

      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Open menu</span>
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>操作</DropdownMenuLabel>
            <DropdownMenuItem onClick={() => onEdit(user)} className="flex items-center">
              <Pencil className="mr-2 h-4 w-4 text-primary" />
              <span>编辑</span>
            </DropdownMenuItem>
            <DropdownMenuItem
              className="flex items-center text-destructive focus:text-destructive"
              onClick={() => onDelete(user)}
            >
              <Trash2 className="mr-2 h-4 w-4" />
              <span>删除</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  },
] 